<template>
  <div style="background-color: rgba(217,203,184,0.27)">
    <div>
      <el-row>
        <el-col :sm="24" :md="13" style="transition:all .5s ease-out;margin-bottom:30px;">
          <el-row class="CommunityArticleBox">
            <el-col :span="24" class="s-item tcommonBox" v-for="(article,index) in articleList ":key="'article'+article.id">
              <header>
                <a  style="display:grid;justify-content:start" :href="'#/My?uid='+article.createBy">
                  <div class="user-avator">
                    <el-row>
                  <img style="margin-top: 10px" v-if="authorList[index].avatar!=null&&authorList[index].avatar!=''" :src="authorList[index].avatar" />
<!--                              <img src="../../assets/img/img.png" />-->
                    <h2>作者：@{{authorList[index].nickName}}</h2></el-row></div></a>
                <h1>
                  {{article.title}}
                </h1>
                <el-tag :type="typeTagList[index]" style="margin-left: 5px;margin-top: 0px">{{typeList[index]}}</el-tag>
                <h2>{{article.createTime}} • {{article.likeCount}} 次点赞 </h2>
                <img v-if="article.thumbnail" :src="article.thumbnail" alt="" height="350"width="400">
              </header>
              <div class="article-content markdown-body" v-html="article.content"></div>
              <div style="display:grid;justify-content:end">
                <el-row>
                  <el-col :span="10" v-if="article.typeId==='5'">
                    <el-button style="margin-right: 0px;margin-top: 5px;"  type="success" icon="el-icon-view" size="small" @click="$refs.plantDialog.openById(article.plantId)">看植物</el-button>
                  </el-col>
                  <el-col :span="10" v-if="article.typeId==='4'">
                    <el-button style="margin-right: 0px;margin-top: 5px;"  type="warning" icon="el-icon-view" size="small" @click="">看商品</el-button>
                  </el-col>
                <el-col :span="10" v-if="article.typeId==='2'">
                  <el-button style="margin-right: 0px;margin-top: 5px;"  type="warning" icon="el-icon-edit" size="small" @click="$refs.writeArticleDialog.open(cid,1,article.id)">写帮助</el-button>
                </el-col>
                <el-col :span="5"  v-if="article.typeId==='2'">
                  <a :href="'#/HelpPage?aid='+article.id" target="_blank"><el-button style="margin-left: 20px;margin-top: 5px;" type="success" icon="el-icon-view" size="small" >看帮助</el-button></a>
            </el-col>


                </el-row>
                <el-row>
                  <div style="display:grid;justify-content:end">
                <el-button style="margin-left: 20px;margin-top: 5px;" type="primary" icon="el-icon-magic-stick" size="small" @click="updateArticleLikeCount(article.id)" >点赞</el-button>
              </div>
                </el-row>
              </div>
            </el-col>
          </el-row>
        </el-col>

        <el-col :sm="8"  :md="6" >
          <div class="communityListBox">
            <section>
              <div class="r1-head">
                <img
                    src="../../../assets/img/bgImg/plant5.png"
                    alt=""
                    height="200"
                />
              </div>
              <div style="margin-top: 10px;display:grid;justify-content:start">
                <el-row>
                    <el-button style="width: 122px" type="success" icon="el-icon-document-add" @click="$refs.writeArticleDialog.open(cid,0,0)" plain>发帖</el-button>
                    <el-button style="width: 122px;margin-left: 40px" type="success" icon="el-icon-document-copy"  plain>我的帖子</el-button>
                </el-row>
              </div>
            </section>
            <section class="rs4">
              <div class="r1-head">
                <img
                    src="../../../assets/img/bgImg/castle2.png"
                    alt=""
                    height="200"
                />
              </div>
<!--              <h2 class="ui label">植物城堡</h2>-->
              <h2>花农们养的植物都在这r</h2>
              <div style="margin-top: 10px;display:grid;justify-content:start">
                <el-button type="success" plain icon="el-icon-guide" style="width: 285px" @click="goToCastle()">点击参观植物城堡>></el-button>
              </div>
                <!--              <ul>-->
<!--                <li v-for="(plant, index) in plantList" :key="'plant' + plant.id">-->
<!--                  <a :href="'#/My?uid=' + plant.createBy" target="_blank">{{-->
<!--                      plant.plantName-->
<!--                    }}</a>-->
<!--                  —— {{ plant.likeCount }} 次点赞-->
<!--                </li>-->
<!--              </ul>-->
            </section>

          </div>
        </el-col>
      </el-row>
    </div>
    <write-article-dialog ref="writeArticleDialog" title="发帖" @confirmData="(floraArticle,fileList,answerTo,isHelp) =>addArticle(floraArticle,fileList,answerTo,isHelp)"></write-article-dialog>
    <plant-dialog ref="plantDialog" title="植物信息"></plant-dialog>

  </div>
</template>


<script>
import {addArticle, getArticleByPlantCategoryId, updateArticleLikeCount} from "@/api/article";
import rightList from "@/components/common/RightList";
import {getUserInfo} from "@/api/user";
import writeArticleDialog from "@/components/page/community/WriteArticle";
import {addQuestionAnswer} from "@/api/question_answer";
import PlantDialog from "@/components/page/community/plantDialog";

export default {
  name: "ArticlePage",
  components:{
    'sg-rightList':rightList,
    writeArticleDialog,
    PlantDialog
  },
  data(){
    return{
      questionAnswer:{
        questionId:'',
        answerId:''
      },
      searchForm:{
        title:'',
        typeId:''
      },
      searchTypeList:[
        {
          id:1,
          name:'养花日常'
        },
        {
          id:2,
          name:'求助帖'
        },
        {
          id:3,
          name:'帮助帖'
        },
        {
          id:4,
          name:'商家帖'
        }
      ],
      cid:'',//专区类型
      articleList:[],
      plantList:[],
      author: {},
      type:'',
      tagType:'primary',
      num:0,
      num1:0,
      authorList:[],
      typeList:[],
      typeTagList:[]
    }
  },
  created() {
    this.routeChange();
  },
  watch: {
    // 如果路由有变化，会再次执行该方法
    '$route':'routeChange'
  },
  methods:{
    updateArticleLikeCount(id){
      updateArticleLikeCount(id).then(res=>{
        this.$message.success('点赞成功！');
        console.log("点赞量更新")
      })
    },
    goToCastle(){
      this.$router.push({path:'/PlantCastle'})
    },
    getArticleType(typeId){
      console.log("typeaadsds",typeId)
      if (typeId==="1"){
        this.tagType='primary'
        this.type='养花日常'
      }else if(typeId==="2"){
        this.tagType='danger'
        this.type='求助帖'
      }else if(typeId==="3"){
        this.tagType="success"
        this.type='帮助帖'
      }else if(typeId==="4"){
        this.tagType='warning'
        this.type='商家帖'
      }else if(typeId==="5"){
        this.tagType='primary'
        this.type='养花日记'
      }
      this.typeList.push(this.type)
      this.typeTagList.push(this.tagType)
      this.num+=1
    },
    getArticleListByPart(plantCategoryId){
      getArticleByPlantCategoryId(plantCategoryId).then(res=>{
        //console.log(res)
        this.articleList=res;
        this.getAllInfo()
      })
    },
    getAllInfo(){
      for(var i=0;i<this.articleList.length;i++){
        let a=this.articleList[i]
        this.getArticleType(a.typeId)
        this.getAuthor(a.createBy)
      }
      console.log("authors:",this.authorList)
      //console.log(this.typeList)
    },
    getAuthor(id){
      getUserInfo(id).then(res=>{
        this.author=JSON.parse(JSON.stringify(res))
        this.authorList.push(this.author)
        this.num1+=1
      })
    },
    addArticle(article,file,answerTo,ishelp){
      console.log("article:",article,"answerto:",answerTo,"isHelp:",ishelp)

      addArticle(article).then(res=>{
        console.log("新增文章：",res)
        if(ishelp===1){
          this.addQ_A(answerTo,res.id)
        }
        this.getArticleListByPart(this.cid)
      })
    },
    addQ_A(qid, aid) {
      this.questionAnswer.questionId=qid
      this.questionAnswer.answerId=aid
      addQuestionAnswer(this.questionAnswer).then(res=>{
        console.log("添加回答成功")
      })
    },
    routeChange(){
      console.log("hhhidoe",this.$route.query.cid)
      var that = this;
      that.cid = that.$route.query.cid==undefined?0:parseInt(that.$route.query.cid);//获取传参的aid
      //判断用户是否存在
      // if(localStorage.getItem('userInfo')){
      //   that.haslogin = true;
      //   that.userInfo = JSON.parse(localStorage.getItem('userInfo'));
      //   that.userId = that.userInfo.userId;
      //   // console.log(that.userInfo);
      // }else{
      //   that.haslogin = false;
      // }
      this.getArticleListByPart(this.cid)
      //this.getAllInfo()
    }
  }
}
</script>

<style scoped>
.CommunityArticleBox{
  transition: all 0.5s ease-out;
  font-size: 15px;
  top:33px;
  right: 100px;
}
.user-avator {
  margin-left: 20px;
}
.user-avator img {
  display: block;
  width: 40px;
  height: 40px;
  border-radius: 50%;
}
.communityListBox {
  position: relative;
}
.communityListBox section {
  transition: all 0.2s linear;
  position: relative;
  background: #fff;
  padding: 15px;
  margin-bottom: 20px;
  border-radius: 5px;
  right: 50px;
  top: 23px;
  bottom: 0px;
}
.communityListBox section:hover {
  transform: translate(0, -2px);
  box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
}
.communityListBox .r1-head {
  text-align: center;
  border-radius: 4px 4px 0 0;
  text-align: center;
  position: relative;
  /*box-shadow: inset 0 -70px 100px -50px rgba(0,0,0,.5);*/
}
.communityListBox .r1-head img {
  width: 100%;
  min-height: 100px;
}
.communityListBox .r1-head h1 {
  position: absolute;
  bottom: 5px;
  margin: 0 0 0 -65px;
  font-size: 20px;
  letter-spacing: 0.5px;
  color: #fff;
  text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.7);
  font-weight: 700;
  width: 130px;
  left: 50%;
}
.communityListBox .r1-head h1 span {
  opacity: 0.3;
}
.communityListBox .r1-body p {
  font-size: 14px;
  margin: 5px 0 8px 0;
  font-weight: 700;
  text-align: center;
}
.communityListBox .r1-body .catch-me {
  text-align: center;
}
.communityListBox .r1-body .catch-me a {
  display: inline-block;
  margin-bottom: 7px;
  position: relative;
  text-decoration: none;
}
.communityListBox .r1-body .catch-me a:hover i {
  color: #fff;
  background: #f4692c;
}
.communityListBox .r1-body .catch-me a i {
  display: inline-block;
}
</style>